import React, {Component} from 'react';
import {Text,StyleSheet,TouchableOpacity,View} from 'react-native';
import {scaleSize} from '../../../utils/screen';
import RadioItem from './Item';
export default class RadioGroup extends Component {
    render() {
        let {radios,selectIndex,style,itemStyle, color} = this.props;
        if (color === undefined) {
            color = "#fd265d";
        }
        return (
            <View style = {[styles.box, {borderColor: color}]}>
                {
                    radios.map((Item,index)=>{
                        return (
                            <View
                                key = {`eval_${index}`}
                                style = {[styles.btnWrap,{borderRightWidth:index==radios.length - 1?0:1, borderRightColor: color},style]}>
                                <RadioItem 
                                    isActive = {selectIndex == index} 
                                    btnText = {Item} 
                                    style = {itemStyle}
                                    color = {color}
                                    onPress = {()=>this.onPress(index)} />
                            </View>
                        )
                    })
                }
            </View>
        );
    }
    onPress(index){
        let {onChange} = this.props;
        onChange && onChange(index);
    }
}
const styles = StyleSheet.create({
    box:{
        flexDirection: 'row',
        height:scaleSize(50),
        borderRadius: scaleSize(5),
        borderColor: "#fd265d",
        borderWidth: 1,
        flexWrap: 'nowrap',
        overflow: 'hidden',
    },
    btnWrap:{
        borderRightColor: "#fd265d",
        borderRightWidth: 1,
    }
})